<!-- echars渲染 -->
<template>
  <div class="personall-pic">
    <!-- <div id="myChart" :style="{ width: '600px', height: '300px' }"></div> -->
    <!-- 为echrts准备一个具备大小（宽高的）的dom -->
    <div id="myChart1"></div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      list: [],
      twenty_five: {},
      thirty: {},
      thirty_five: {},
      forty: {},
      thanforty: {},
      myChartPic: '',
      a: 0,
      b: 0,
      c: 0,
      d: 0,
      e: 0,
      value:'',
      name:''
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // draw() {
    //   //基于准备好的dom初始化echars实例
    //   let myChart = this.$echarts.init(document.getElementById("myChart"));
    //   //绘制图表
    //   //var setOption
    //   myChart.setOption({
    //     title: { text: "富贵公司年龄分布" },
    //     tooltip: {},
    //     xAxis: {
    //       data: ["20岁以下", "20-25", "25-30", "35-40"],
    //     },
    //     yAxis: {},
    //     series: [
    //       {
    //         name: "年龄",
    //         type: "bar",
    //         data: [5, 20, 25, 20],
    //       },
    //     ],
    //   });
    //   // setOption && myChart.setOption(setOption);
    // },
    initData() {
      //初始化饼状图实例
     this.myChartPic = this.$echarts.init(document.getElementById("myChart1"));
     this.myChartPic.setOption({
        title: {
          text: "富贵公司人员年龄分析图", //主标题
          x: "center", //x轴对齐方式
        },
        //提示框
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical", //图例列表的布局朝向
          left: "left", //图例组件离容器下册的距离
          show: true,
          data: ["小于25", "25-30", "30-35", "35-40", "大于40"],
        },
        series: [
          {
            name: "年龄分析",
            type: "pie",
            radius: "50%",
            data: [
              //   { value: this.twenty_five.length, name: "<25" },
              //   { value:this.thirty.length, name: "25-30" },
              //   { value: this.thirty_five.length, name: "30-35" },
              //   { value: this.forty.length, name: "35-40" },
              //   { value:this.thanforty.length, name: ">40" },
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0,0,0,.5)",
              },
            },
          },
        ],
      });
    //  console.log(this.myChartPic.setOption.title);
    },
 
    //获取数据
    async getRes() {
     let res=await this.$http.get("/getPersonneInfo")
      res.data.forEach((item) => {
        //  console.log(item);
        var agetype = parseFloat(item.age);
        //    console.log(agetype);
        if (agetype < 25) {
          this.a += 1;
          this.twenty_five.value = this.a;
          this.twenty_five.name = "小于25";
        //  console.log(this.picOption.series[0].data[0]["value"]);
        } else if (agetype >= 25 && agetype < 30) {
          this.b += 1;
          this.thirty.value = this.b;
          this.thirty.name = "25-30";
        } else if (agetype >= 30 && agetype < 35) {
        //  this.thirty_five.push(agetype);
          this.c += 1;
           this.thirty_five.value = this.c;
          this.thirty_five.name = "30-35";
        } else if (agetype >= 35 && agetype < 40) {
        //  this.forty.push(agetype);
          this.d += 1;
          this.forty.value = this.d;
          this.forty.name = "35-40";
        } else {
         // this.thanforty.push(agetype);
          this.e += 1;
           this.thanforty.value = this.e;
          this.thanforty.name = "大于40";
        }
      });
 
      this.list.push( this.twenty_five)
      this.list.push( this.thirty)
      this.list.push( this.thirty_five)
      this.list.push( this.forty)
      this.list.push( this.thanforty)
    //  console.log(this.list);
      this.myChartPic.setOption({			
					series:[{
							data: this.list
						}]
				});
    },
  
    
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  //  this.draw(),
     this.initData();
     this.getRes()
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
.personall-pic {
  width: 100%;
  height: 100%;
  padding: 40px;
  padding-top: 60px;
}
#myChart1 {
  width: 600px;
  height: 600px;
}
</style>